<!DOCTYPE html>

{% load static %}

<html>
    <head>
        <title>FreeLabel</title>
    </head>

    <body>
        <h3>FreeLabel annotation tool </h3> 

        {% if user.is_authenticated %}
            <h3> Hello {{ user.username }}!</h3>

            <h2>Annotate a custom dataset</h2>
            <a href="/freelabel/playCustomScratch/">From scratch</a><br />

            <a href="/freelabel/logout/">Logout</a><br />

        {% else %}
            <strong>Please register if you don't have account!</strong><br />

            <form id="user_form" method="post" action="/freelabel/register/"
                    enctype="multipart/form-data">

            {% csrf_token %}

            <!-- Display each form. The as_p method wraps each element in a paragraph
                 (<p>) element. This ensures each element appears on a new line,
                 making everything look neater. -->
            {{ user_form.as_p }}
            <!-- {{ profile_form.as_p }} -->

            <!-- Provide a button to click to submit the form. -->
            <input type="submit" name="submit" value="Register" />
            <br/>
            <br/>                  
            {% if registered %}
                <strong>Thank you for registering!</strong>
                <p>Please log in below.</p>
            {% else %}
                <strong>If you have account, please log in!</strong><br/>
            {% endif %}
            <input type="button" onclick="location.href='/freelabel/login/';" value="Login" />
            </form>           
        {% endif %}      

        <h3>General information </h3>
        <li> Output files are saved under: (freelabelpath)/static/log/masks/(username)/(dataset)/*.mat</li>
        <li> Log files are saved under: (freelabelpath)/static/log(dataset)_(username).txt </li>
        <li> Each row in Log file contain: file name; annotation time [s]; % of image area that was annotated; no. of growing calls </li>
        </ul>

        <body>
            <div style="width: 15%; height: 100%; float:left;">
                <h3> Available tools </h3>
                <ul>
                    <li> <img id="pencilIcon" src="/static/images/pencil4.png" style="height: 30px"><b> Pencil (P)</b></li>
                    <img id="rectIcon" src="/static/images/pencil.gif" style="height: 150px">
                    <h4></h4>
                        <ul>
                            <li>Freehand scribbles: faster, less precise</li>
                        </ul>
                    <h4></h4>
                    <li> <img id="rectIcon" src="/static/images/rect4.png" style="height: 30px"><b> Rectangle (R)</b></li>
                        <img id="rectIcon" src="/static/images/rect.gif" style="height: 150px">
                </ul>
            </div>
            <div style="width: 15%; height: 100%; float:left;">
                <h3>  (Keyboard shortcuts)</h3>
                <ul>
                    <li> <img id="lineIcon" src="/static/images/line4.png" style="height: 30px"><b> Line (L)</b></li>
                        <img id="rectIcon" src="/static/images/line.gif" style="height: 150px">
                        <h4></h4>
                        <ul>
                            <li>Straight lines: more precise (e.g., thinner structures)</li>
                        </ul>
                    <li> <img id="circIcon" src="/static/images/circle4.png" style="height: 30px"><b> Circle (C)</b></li>
                            <img id="rectIcon" src="/static/images/circle.gif" style="height: 150px">
                </ul>
            </div>
            <h3> Styles </h3>
            <div style="width: 20%; height: 100%; float:left;">
                <ul>
                    <li> For all tools <img id="pencilIcon" src="/static/images/pencil8.png" style="height: 30px">
                        <img id="lineIcon" src="/static/images/line8.png" style="height: 30px">
                        <img id="rectIcon" src="/static/images/rect8.png" style="height: 30px">
                        <img id="circIcon" src="/static/images/circle8.png" style="height: 30px"></li>  <br>
                        <ul>
                            <li>1,2,4 and 8px wide options</li>
                        </ul>
                    <h4></h4>
                    <li> For Rectangle and Circle</li>  <br>
                        <ul>
                            <li> Hollow <img id="rectIcon" src="/static/images/rect8.png" style="height: 30px">
                                <img id="circIcon" src="/static/images/circle8.png" style="height: 30px"> </li>
                            <li> Filled <img id="rectIcon" src="/static/images/rect9.png" style="height: 30px">
                                <img id="circIcon" src="/static/images/circle9.png" style="height: 30px"> </li>
                        </ul>
                </ul>
                <h3> Eraser </h3>
                <ul>
                    <li> Available for all tools as a category <img id="pencilIcon" src="/static/images/pencil8.png" style="height: 30px">
                        <img id="lineIcon" src="/static/images/line8.png" style="height: 30px">
                        <img id="rectIcon" src="/static/images/rect8.png" style="height: 30px">
                        <img id="circIcon" src="/static/images/circle8.png" style="height: 30px"></li>  <br>
                            <li> Filled Circle and Rectangle are particularly useful as eraser <img id="rectIcon" src="/static/images/rect9.png" style="height: 30px">
                            <img id="circIcon" src="/static/images/circle9.png" style="height: 30px"> </li>
                    <h4></h4>
                </ul>
            </div>
            <h3> Grow traces </h3>
            <div style="width: 20%; height: 100%; float:left;">
                    <button type="button">Grow traces</button> Propagate traces onto image
                    <img id="rectIcon" src="/static/images/refine.gif" style="height: 200px">
                <h3> Categories </h3>
                    <li> <img id="pencilIcon" src="/static/images/addCat.png" style="height: 30px"></li>
                    <button type="button">+</button><b> Adds new categories </b>
                    <h4></h4>
                        <ul>
                            <li>Up to 20 categories + background</li>
                            <li>Colors automatically assigned according to PASCAL VOC encoding</li>
                        </ul>
                </ul>
            </div>
        </body>

        </ul>


    </body>
</html>
